<template>
  id:<input type="text" v-model="id" />,name:<input
    type="text"
    v-model="name"
  /><button @click="add1">在末尾添加新人物</button>
  <button @click="add2">在前部添加新人物</button>
  <div v-for="item in list">
    <input type="checkbox" />
    {{ item.id }}.{{ item.name }}
  </div>
</template>

<script lang="ts">
import { reactive, ref } from "vue";
export default {
  setup() {
    let list = reactive([
      {
        id: 1,
        name: "刘备",
      },
      {
        id: 2,
        name: "孙权",
      },
      {
        id: 3,
        name: "曹操",
      },
      {
        id: 4,
        name: "诸葛亮",
      },
    ]);
    let id = ref(0);
    let name = ref("");

    function add1() {
      list.push({
        id: id.value,
        name: name.value,
      });
    }
    function add2() {
      list.unshift({
        id: id.value,
        name: name.value,
      });
    }

    return { list, id, name, add1, add2 };
  },
};
</script>
<style scoped></style>
